<template>
  <div>
    <div class="sticky top-0">
      <nut-swiper :init-page="state.page3" height="400" :loop="true" @change="change">
        <nut-swiper-item v-for="(item, index) in feedDetail?.imageUrls" :key="index">
          <img class="" :src="item" alt="" />
        </nut-swiper-item>
      </nut-swiper>
      <!-- 导航点 -->
      <div class="flex justify-center items-center my-1">
        <div
          v-for="(item, index) in feedDetail?.imageUrls.length"
          :key="index"
          class="m-0.5 w-1.5 h-1.5 rounded-full"
          :class="state.current - 1 === index ? 'bg-#38bba5' : 'bg-#cacaca'"
        ></div>
        <!-- <div class="m-0.5 w-1 h-1 rounded-full bg-#cacaca"></div> -->
      </div>
    </div>
    <!-- 内容介绍 -->
    <div class="p-3 relative z-100 bg-white rounded-lg">
      <div class="mb-1 font-bold text-#333">{{ feedDetail?.feedTitle }}</div>
      <div class="mb-3 text-sm text-#747474" v-html="feedDetail?.feedContent"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive } from "vue";
import * as FeedApi from "@/api/official-website/unit-feed";
import { useRoute } from "vue-router";

const route = useRoute();

const state = reactive({
  page3: 0,
  current: 1,
});
const change = (index: number) => {
  state.current = index + 1;
};

const feedDetail = ref<FeedApi.FeedDetail>();

// 获取信息流详情
const getfeedDetail = () => {
  const id = String(route.query.id);
  FeedApi.getFeedById(id).then((res) => {
    feedDetail.value = res.data;
  });
};
getfeedDetail();
</script>

<style>
.nut-swiper-item {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.page {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 46px;
  height: 22px;
  background: rgba(0, 0, 0, 0.33);
  border-radius: 22px;
  text-align: center;
  color: #fff;
  font-size: 14px;
}
</style>
